<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商城管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/merchants' }">商户管理</el-breadcrumb-item>
			<el-breadcrumb-item>选择品牌</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="20" style="position: relative;">
				<el-col :span="6">
					<el-input placeholder="品牌名称">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
				<el-button style="position: absolute;right: 10px;" type="primary" @click="addShow">添加品牌</el-button>
			</el-row>
			<el-table :data="listData" border stripe>
				<el-table-column label="品牌名称" prop="brandName"></el-table-column>
				<el-table-column label="商户数量" prop="shopCount"></el-table-column>
				<el-table-column label="编辑品牌">
					<template slot-scope="scope">
						<el-button @click="showEdit(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
					</template>
				</el-table-column>
				<el-table-column label="编辑商户">
					<template slot-scope="scope">
						<el-button @click="showEdit2(scope.row.id)" type="primary" size="mini" icon="el-icon-edit"></el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageCount"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
		</el-card>
		
		<el-dialog
		  title="添加品牌"
		  :visible.sync="addDialogVisible"
		  width="50%">
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
				<el-form-item label="品牌名称" prop="brandName">
				  <el-input v-model="addForm.brandName"></el-input>
				</el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addSub">确 定</el-button>
		  </span>
		</el-dialog>
		
		<el-dialog
		  title="编辑品牌"
		  :visible.sync="editDialogVisible"
		  width="50%">
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
				<el-form-item label="品牌名称" prop="brandName">
				  <el-input v-model="editForm.brandName"></el-input>
				</el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editSub">确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageCount:1,
				pageSize:20,
				total:0,
				listData:[],
				addDialogVisible:false,
				editDialogVisible:false,
				addForm:{
					brandName:''
				},
				editForm:{},
				addFormRules:{
					brandName:[
						{ required: true, message: '请输入品牌名称', trigger: 'blur' }
					]
				},
				editFormRules:{
					brandName:[
						{ required: true, message: '请输入品牌名称', trigger: 'blur' }
					]
				},
				isFirstEnter:false
			}
		},
		created() {
			this.getList()
		},
		beforeRouteEnter(to,from,next) {
			if(from.path == '/updateMerchantAll'){
				to.meta.isBack = true
			}
			next();
		},
		activated(){
			if(!this.$route.meta.isBack || this.isFirstEnter){
				this.pageCount=1
				this.pageSize=20
				this.total=0
				this.listData = [];
				this.getList();
			}else{
				this.getList();
			}
			this.$route.meta.isBack=false
			this.isFirstEnter=false
		},
		methods:{
			async getList(){
				const {data:res} = await this.$http.post('/brand/list',{pageCount:this.pageCount,pageSize:this.pageSize})
				this.listData = res.data.records
				this.total = res.data.total
				// console.log(res);
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageCount = val
				this.getList()
			},
			addShow(){
				this.addForm={brandName:''}
				this.addDialogVisible = true
			},
			async addSub(){
				const {data:res} = await this.$http.post('/brand/save',{name:this.addForm.brandName})
				console.log(res)
				if(res.code!=200){
					return this.$message.error('添加失败')
				}
				this.$message.success('添加成功')
				this.addDialogVisible = false
				this.getList()
			},
			async showEdit(id){
				const {data:res} = await this.$http.post('/brand/getById',{id:id})
				// console.log(res);
				this.editForm = res.data
				this.editDialogVisible = true
			},
			async editSub(){
				const {data:res} = await this.$http.post('/brand/update',{id:this.editForm.id,name:this.editForm.brandName})
				if(res.code!=200){
					return this.$message.error('修改失败')
				}
				this.$message.success('修改成功')
				this.editDialogVisible = false
				this.getList()
			},
			showEdit2(id){
				this.$router.push({path:"/updateMerchantAll",query:{id:id}})
			}
		}
	}
</script>

<style>
</style>
